<template>
  <section class="">
    <div class="w-275 mx-auto">
      <div class="text-center text-2def">OUR ADVANTAGE</div>
      <div class="flex justify-center mt-12 mb-16 divide-x divide-black h-28 py-2">
        <div
          v-for="(item, index) in images1"
          :key="index"
          class="flex justify-center items-center max-w-1/4 px-4"
        >
          <figure class="our-advantage-img">
            <img :src="item.img" alt="" />
          </figure>
          <div class="our-advantage-text">
            <h3 class="h-title">{{ item.title }}</h3>
            <p class="p-desc">{{ item.desc }}</p>
          </div>
        </div>
      </div>
      <div class="flex justify-center divide-x divide-black h-28 py-2">
        <div
          v-for="(item, index) in images2"
          :key="index"
          class="flex justify-center items-center max-w-1/4 px-4"
          style="width: 346px"
        >
          <figure class="our-advantage-img">
            <img :src="item.img" alt="" />
          </figure>
          <div class="our-advantage-text">
            <h3 class="text-lg font-semibold">{{ item.title }}</h3>
            <p class="text-sm">{{ item.desc }}</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import QUICK_TUAROUND from '/src/images/home/OUR-ADVANTAGE-1.webp'
import DFM_ANALYSIS from '/src/images/home/OUR-ADVANTAGE-2.webp'
import PROFESSIONAL_SERVICES from '/src/images/home/OUR-ADVANTAGE-3.webp'
import GOOD_RAPUTATION_FROM_CUSTOMERS from '/src/images/home/OUR-ADVANTAGE-4.webp'
import INSTANT_QUOTING from '/src/images/home/OUR-ADVANTAGE-5.webp'
import NO_MOQ_REQUIRED from '/src/images/home/OUR-ADVANTAGE-6.webp'
import HIGH_QUALITY from '/src/images/home/OUR-ADVANTAGE-7.webp'
import COST_EFFICIENT from '/src/images/home/OUR-ADVANTAGE-8.webp'



const images1 = [
  {
    img: QUICK_TUAROUND,
    title: 'QUICK TUAROUND',
    desc: 'Parts make in 5 days and delivery on time'
  },
  {
    img: DFM_ANALYSIS,
    title: 'DFM ANALYSIS',
    desc: 'Once receiving the inquiry, we will provide you with a preliminary DFM report'
  },
  {
    img: PROFESSIONAL_SERVICES,
    title: 'PROFESSIONAL SERVICES',
    desc: 'More than 10 years of rapid tooling making'
  },
  {
    img: GOOD_RAPUTATION_FROM_CUSTOMERS,
    title: 'GOOD RAPUTATION FROM CUSTOMERS',
    desc: 'Customers are satisfied with our services, products quality and delivery time.'
  }
]

const images2 = [
  {
    img: INSTANT_QUOTING,
    title: 'INSTANT QUOTING',
    desc: 'Timely reply and provide the quote within 12 hours'
  },
  {
    img: NO_MOQ_REQUIRED,
    title: 'NO MOQ REQUIRED',
    desc: 'Maxprecise Global does not have minimum order quantity'
  },
  {
    img: HIGH_QUALITY,
    title: 'HIGH QUALITY',
    desc: 'Maxprecise Global does not have minimum order quantity'
  },
  {
    img: COST_EFFICIENT,
    title: 'COST-EFFICIENT',
    desc: '+30% cost lower than western competitors'
  }
]
</script>

<style scoped>


.our-advantage-img {
  width: 20%;
  margin-right: 10px;
  opacity: 0.7;
}

.our-advantage-text {
  width: 80%;
}


.h-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: normal;
  margin-bottom: 5px;
}

.p-desc {
  font-size: 13px;
  line-height: 17px;
  letter-spacing: normal;
}
</style>
